<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        body{
            background-image: url("../../images/img/bg.jpg");
            background-repeat: no-repeat;
            margin: 0px;
            padding: 0px;
            width: 100%;
            height: 100%;
            top: 0px;
            left: 0px;
            position: absolute;
        }
        .login-wrap {
            box-sizing: border-box;
            padding-top: 10%;
            padding-bottom: 10%;
            /*background-repeat: repeat-y;*/
            background-position: center right;
        }

        .login-container {

            border-radius: 10px;
            margin: 0px auto;
            width: 350px;
            padding: 30px 35px 15px 35px;
            margin-top:100px;
            background-color: rgb(255, 255, 255);
            text-align: left;
        }
        .register{
            text-align:left;
            margin-left:40px;
        }
        .title{
             text-align:center;
             text-color:rgb(40, 40, 40);
        }
        .forgetPwd{
            text-align: right;
            margin-left:130px;
        }+
    </style>
</head>
<body>
<div id="app">
    <template>
        <div class="login-wrap">
            <el-form class="login-container" :model="form" :rules="loginRules">
                <h1 class="title">用户登录</h1>
                <el-form-item label="账号" prop="username">
                    <el-input type="username" v-model="form.username" placeholder="登录账号" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="登录密码" prop="password">
                    <el-input type="password" v-model="form.password" placeholder="登录密码" show-password
                              autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button  type="primary" :loading="loading" style="width: 100%;" @click="login()">
                        <span v-if="!loading">登录</span>
                        <span v-else>登录中...</span>
                    </el-button>
                </el-form-item>
                <div>
                    <el-link type="primary" @click="register()" class="register">注册账号</el-link>
                    <el-link type="primary" @click="changpwd()" class="forgetPwd">修改密码</el-link>
                </div>

            </el-form>
        </div>
    </template>
</div>
<script src="../../js/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../js/axios-0.18.0.js"></script>

<script>
    var Vue = new Vue({
        el: "#app",
        data: {
            form:{
                username: 'admin',
                password: '123'
            },
            loading: false
        },
        computed: {
            loginRules() {
                const validateUsername = (rule, value, callback) => {
                    if (value.length < 1 ) {
                        callback(new Error('请输入用户名'))
                    } else {
                        callback()
                    }
                }
                const validatePassword = (rule, value, callback) => {
                    if (value.length<1){
                        callback(new Error('请输入密码'))
                    }else {
                        callback()
                    }

                }
                return {
                    'username': [{ 'validator': validateUsername, 'trigger': 'blur' }],
                    'password': [{ 'validator': validatePassword, 'trigger': 'blur' }]
                }
            }
        },
        methods: {
            login() {
                this.loading = true;
                axios.post("/users", this.form).then((res) => {
                    if (res.data.code = 10011) {
                         window.location.href = '../../index.html';
                    }else{
                        this.$message.error("用户名或密码错误！");
                        this.loading = false;
                    }
                });
            },
            register(){
                window.location.href = '../register/register.html';
            },
            changpwd(){
                window.location.href = '../changePwd/ChangePwd.html';
            }
        },

    });

</script>
</body>
</html>